
<template>
  <view class="oreo-tabs">
    <view
      class="tab"
      v-for="item in tabs"
      :key="item.key"
      :class="{ active: item.key === tabValue }"
      @click.stop="handleChangeTab(item)"
    >
      {{
        item.label === "未使用" ? `${item.label}（${notUsedNum}）` : item.label
      }}
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref } from "vue";
const emits = defineEmits(["change"]);
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  notUsedNum: {
    type: Number,
  },
});
const tabValue = ref(0);

const handleChangeTab = (tab) => {
  tabValue.value = tab.key;

  switch (tab.key) {
    case 0:
      getApp().emdlz(
        "track",
        "event",
        "store_page",
        "click",
        "not_used_coupon",
        ""
      );

      break;

    case 1:
      getApp().emdlz(
        "track",
        "event",
        "store_page",
        "click",
        "used_coupon",
        ""
      );

      break;

    case 2:
      getApp().emdlz(
        "track",
        "event",
        "store_page",
        "click",
        "expired_coupon",
        ""
      );

      break;

    default:
      break;
  }
  emits("change", {
    isNew: true,
    tab: tab.key,
  });
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.oreo-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  height: 53px;
  padding: 21px 35px 0 35px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;

  .tab {
    width: 60px;
    text-align: center;
    height: 100%;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    color: #2a2a2a;
    box-sizing: border-box;
    font-size: 14px;

    &.active {
      color: @primary-color;

      &::after {
        content: "";
        position: absolute;
        width: 60px;
        height: 3px;
        background: #0058c6;
        border-radius: 2px;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 0;
      }
    }
  }
}
</style>
